<template>
  <div>
    <van-cell-group>
      <van-field label="用户名"
                 required
                 clearable
                 @blur='onBlur'
                 v-model="value"
                 :error-message='errorMessage'
                 placeholder="请输入用户名" />
      <van-field label="手机号"
                 required
                 clearable
                 @blur='onBlur2'
                 v-model="tel"
                 :error-message='errorMessage2'
                 placeholder="请输入手机号" />
      <van-field v-model="sms"
                 center
                 required
                 clearable
                 label="短信验证码"
                 placeholder="请输入短信验证码">
        <van-button slot="button"
                    size="small"
                    type="primary">发送验证码</van-button>
      </van-field>
    </van-cell-group>
    <div align='center'>
      <van-button type="primary">登录</van-button>
      <van-button type="danger">注册</van-button>
    </div>
    <van-field readonly
               label="密码"
               clickable
               :value="value"
               @touchstart.native.stop="show = true" />

    <van-number-keyboard v-model="value"
                         :show="show"
                         :maxlength="6"
                         @blur="show = false" />
  </div>
</template>
<script>
import { Field, CellGroup, Button, NumberKeyboard, PasswordInput } from 'vant';
export default {
  name: 'formTest',
  components: {
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [NumberKeyboard.name]: NumberKeyboard,
    [PasswordInput.name]: PasswordInput
  },
  data () {
    return {
      value: '',
      errorMessage: '',
      errorMessage2: '',
      tel: '',
      sms: '',

      show: false
    }
  },
  methods: {
    onBlur () {
      if (this.value === '') {
        this.errorMessage = '用户名不能为空'
      } else {
        this.errorMessage = ''
      }
    },
    onBlur2 () {
      if (this.tel === '') {
        this.errorMessage2 = '手机号不能为空'
      } else {
        this.errorMessage2 = ''
      }
    }
  }
}
</script>